monaco |
您所在的位置:网站首页 › js 控制滚动条位置的快捷键是哪个 › monaco |
一、自定义语言和主题: (参考例子:https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages) (若需要自定义注释和关键字等高亮显示颜色,参考:https://microsoft.github.io/monaco-editor/monarch.html) @ViewChild('editor') editorContent: ElementRef; // 编辑器Element private editor: any; // 创建的编辑器 ngAfterViewInit() { amdRequire.config({'vs/nls': {availableLanguages: {'*':'zh-cn'}}}); // 设置中文菜单等 amdRequire(['vs/editor/editor.main'], () => { monaco.languages.register({id:'mySpecialLanguage'}); monaco.languages.setMonarchTokensProvider('mySpecialLanguage', { tokenizer: { root: [ [/\(.*调试.*/, '调试'], //其中逗号左侧为正则表达式 http://www.runoob.com/regexp/regexp-metachar.html,右侧为标识该匹配方式的名称 [/\(.*通知.*/, '通知'], [/\(.*警告.*/, '警告'], [/\(.*错误.*/, '错误'], [/\(.*崩溃.*/, '崩溃'], [/\(.*信息.*/, '信息'], ] } }); monaco.editor.defineTheme('light', { base:'vs', // 定义浅色主题 inherit:false, rules: [ {token:'调试', foreground:'666666'}, // 左侧对应上面定义的名称,右侧自定义颜色或者样式 {token:'通知', foreground:'00b4ff'}, {token:'警告', foreground:'ffb400'}, {token:'错误', foreground:'ff0000'}, {token:'崩溃', foreground:'c30209'}, {token:'信息', foreground:'222222'}, ], colors: { 'editor.background':'#f4f4f4', 'editorLineNumber.foreground':'#222222', 'editor.lineHighlightBackground':'#f4f4f4', } }); monaco.editor.defineTheme('dark', { base:'vs-dark', // 定义黑色主题 inherit:false, rules: [ {token:'调试', foreground:'959595'}, {token:'通知', foreground:'00b4ff'}, {token:'警告', foreground:'fff000'}, {token:'错误', foreground:'ff0000'}, {token:'崩溃', foreground:'c30209'}, {token:'信息', foreground:'ffffff'}, ], colors: { 'editor.background':'#3b3b3b', 'editorLineNumber.foreground':'#ffffff', 'editor.lineHighlightBackground':'#3b3b3b', } }); // monaco.editor.setTheme(this.windowService.theme); this.editor = monaco.editor.create(this.editorContent.nativeElement, { language:'mySpecialLanguage', theme:this.windowService.theme, // mouseWheelZoom: true, automaticLayout:true, scrollBeyondLastLine:false, // lineNumbersMinChars: 5, lineHeight:24, hideCursorInOverviewRuler:true, scrollbar: { useShadows:false, vertical:'visible', horizontal:'visible', horizontalSliderSize:5, verticalSliderSize:5, horizontalScrollbarSize:15, verticalScrollbarSize:15, }, quickSuggestions:false, overviewRulerBorder:false, fontFamily:'Microsoft YaHei', minimap: { enabled:false }, // readOnly: false }); this.windowService.themeChange.subscribe(() => { monaco.editor.setTheme(this.windowService.theme); }); localStorage.setItem('settings', JSON.stringify(this.settings)); }); } /** * monaco添加当行内容方法 * @param text 内容 */ private addContent(text: string): void { if (!this.editor) { return; } this.editor.updateOptions({ scrollbar: { horizontalHasArrows: false, horizontal: 'hidden', }, }); // 新增一条时横向滚动条设为不可见,否则可能占用编辑器位置,使得在横向滚动条位置新增内容出现undefined const count = this.editor.getModel().getLineCount() || 0; const range = new monaco.Range(count, 1, count, 1); if (count > this.maxLen) { this.editor.executeEdits('log-source', [{ identifier: 'event_id', range: new monaco.Range(1, 1, 2, 1), text: null, forceMoveMarkers: true }]); // 指定范围设定 text: null 可以等价于删除某行。 // this.editor.setValue(this.editor.getModel().getValueInRange(new monaco.Range(count - this.maxLen + 1, 1, count, 1))); } this.editor.executeEdits('log-source', [{ identifier: 'event_id', range: range, text: text, forceMoveMarkers: true }]); if (this.settings.isWrap) { this.isOpenWrap(); } } /*** monaco自动换行*/ isOpenWrap() { if (this.settings.isWrap) { this.editor.updateOptions({ wordWrap:'on', // wordWrap: 'wordWrapColumn', // wordWrapColumn: 80, wrappingIndent:'indent', scrollbar: { horizontalHasArrows:false, horizontal:'hidden', }, // mouseWheelZoom: true, }); } else { this.editor.updateOptions({ wordWrap:'off', }); } } private afterShowLog() { this.divHeight =this.editorContent.nativeElement.clientHeight; // 获取编辑器可视区高度 if (!this.editor) {return; } // 滚动到最后一行 if (this.settings.isBottom) { const count =this.editor.getModel().getLineCount() ||0; this.editor.revealLine(count); } // 屏蔽自动滚动后,监测滚动条是否发生变化,如果拖动到底部,则打开自动滚动. if (!this.settings.isBottom) { this.editor.onDidScrollChange((e) => { if (e.scrollTop >0) { if (this.divHeight + e.scrollTop === e.scrollHeight) { this.settings.isBottom =true; const count =this.editor.getModel().getLineCount() ||0; this.editor.revealLine(count); this.isLast =true; this.isClickScroll =false; } else { this.isLast =false; } } }); } // if (!this.isLast) { this.editor.onMouseDown((e) => { this.isLast =false; if (this.settings.isBottom) { if (e.target.type.toString() ==='11' && e.target.element.scrollHeight ===12) { this.settings.isBottom =true; // 点击横向滚动条时不改变自动滚动状态 }else { this.settings.isBottom =false; if (e.target.type.toString() ==='11' && e.target.element.scrollHeight >12) { this.isClickScroll =true; // console.log('点击垂直滚动条'); }else { this.isClickScroll =false; // console.log('点击编辑区文字'); } } } }); } // 点击或拖动垂直滚动条 屏蔽自动滚动后三秒恢复自动滚动;点击文本区域,直接屏蔽自动滚动 this.editor.onMouseUp(() => { if (!this.isLast) { if (!this.settings.isBottom) { if (this.isClickScroll) { setTimeout(() => { // console.log('3秒打开自动滚动'); this.settings.isBottom =true; const count =this.editor.getModel().getLineCount() ||0; this.editor.revealLine(count); }, 3000); } } } }); } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |